<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日运气</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            box-sizing: border-box; /* 确保padding不会影响整体高度 */
        }
        h1 {
            color: #333;
            font-size: 2.5em;
            margin-bottom: 20px;
        }
        .result {
            font-size: 1.5em;
            margin: 20px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            max-width: 80%; /* 限制最大宽度，使其在iframe中更好看 */
        }
        .result:hover {
            transform: scale(1.05);
        }

        /* 暗色模式样式 */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #121212;
                color: #ffffff;
            }
            h1 {
                color: #ffffff;
            }
            .result {
                background-color: #1f1f1f;
                color: #ffffff;
                box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
            }
        }
    </style>
</head>
<body>
    <div class="result" id="result"></div>
    <script>
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        function displayLuck() {
            let luck = localStorage.getItem('todayLuck');
            if (!luck) {
                luck = getRandomInt(1, 100);
                localStorage.setItem('todayLuck', luck);
            }
            let resultElement = document.getElementById('result');
            if (luck < 30) {
                resultElement.textContent = `你的运气是 ${luck}，今天可能不太顺利，加油！`;
            } else if (luck >= 30 && luck < 70) {
                resultElement.textContent = `你的运气是 ${luck}，今天运气一般，保持平常心。`;
            } else {
                resultElement.textContent = `你的运气是 ${luck}，今天运气不错，好好把握机会！`;
            }
        }
        displayLuck();
    </script>
</body>
</html>
